<template>
	<view class="container">
		<view class="goods-detail-box">
			<view class="header f-28 col-3">
				<view @tap="bindHeaderTap" :class="[dataType==='all'?'active':'']" data-type="all">
					<text>全部</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='payment'?'active':'']" data-type="payment">
					<text>待付款</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='delivery'?'active':'']" data-type="delivery">
					<text>待发货</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='received'?'active':'']" data-type="received">
					<text>待收货</text>
				</view>
				<view @tap="bindHeaderTap" :class="[dataType==='comment'?'active':'']" data-type="comment">
					<text>待评价</text>
				</view>
			</view>
			<scroll-view @scrolltolower="bindDownLoad" scroll-y style="width: 750upx;margin-top:88upx;" :style="[{'height': Height }]">
				<view class="wrapper" v-if=" list.data !== undefined  && list.data.length > 0">
					<!-- <view v-if="{{list.length}}"> -->
					<view class="m-top20" v-for="(item,index) in list.data" :key="index" @tap="navigateToDetail" :data-id="item.order_id">
						<view class="order-box b-f">
							<view class="order-header dis-flex">
								<view class="flex-box t-l">
									<text class="title">商品列表</text>
								</view>
								<view class="flex-box t-r">
									<text class="cont">{{item.state_text}}</text>
								</view>
							</view>
						</view>
						<view class="order-box b-f">
							<view class="order-cont dis-flex">
								<view class="order-num">
									<text>订单号：{{item.order_no}}</text>
								</view>
								<view class="order-time">
									<text>{{item.create_time}}</text>
								</view>
							</view>
						</view>
						<view class="order-box order-img_list">
							<view class="order-shop">
								<view class="order-list-box dis-flex">
									<view class="left">
										<view class="dis-flex">
											<view class="order-shop-left" v-for="(item,inx) in item.goods" :key="inx">
												<image :src="item.image.file_path"></image>
											</view>
										</view>
									</view>
									<view class="right dis-flex flex-x-center flex-y-center">
										<text class="goods-number">共{{item.goods.length}}件</text>
										<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
									</view>
								</view>
							</view>
						</view>
						<view class="order-box b-f">
							<view class="order-btn dis-flex">
								<view class="order-left">
									<view class="text">
										<text>合计：</text>
										<text class="col-m">￥{{item.pay_price}}</text>
									</view>
								</view>
								<view class="order-right">
									<view class="btn-group dis-flex" v-if="item.order_status.value != 20">
										<!-- 未支付取消订单 -->
										<view v-if="item.pay_status.value==10">
											<view @tap.stop="cancelOrder" class="btn-default" :data-id="item.order_id">取消</view>
										</view>
										<!-- 已支付取消订单 -->
										<block v-if="item.order_status.value!=21">
											<view v-if="item.pay_status.value==20 && item.delivery_status.value==10">
												<view @tap.stop="cancelOrder" class="btn-default" :data-id="item.order_id">申请取消</view>
											</view>
										</block>
										<block v-else>
											<view class="f-28 col-8">取消申请中</view>
										</block>
										<view v-if="item.pay_status.value==10">
											<view @tap.stop="onPayOrder" class="btn-main" :data-id="item.order_id">付款</view>
										</view>
										<view v-if="item.delivery_status.value==20 && item.receipt_status.value == 10">
											<view @tap.stop="receipt" class="btn-main" :data-id="item.order_id">确认收货</view>
										</view>
										<view v-if="item.order_status.value==30 && item.is_comment==0">
											<view @tap.stop="comment" class="btn-default" :data-id="item.order_id">评价</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
				<view v-if="!isLoading && !list.data.length">
					<view class="yoshop-notcont">
						<text class="iconfont icon-wushuju"></text>
						<text class="cont">亲，您还没有订单信息哦！</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 支付方式弹窗 -->
		<zan-popup  :class="[showPayPopup ? 'pop--show' : '']" @tap="onTogglePayPopup">
			<view class="pop__mask " @tap="handleMaskClick"></view>
			<view class="pop__container">
				<!-- <zanpopup :show="showPayPopup" @tap="onTogglePayPopup"> -->
				<view class="pop-orderPay pop-example__container">
					<view class="pop-title">
						<text class="f-30">请选择支付方式</text>
					</view>
					<view class="pop-content">
						<view class="pay-method">
							<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" report-submit="true">
								<button form-type="submit" class="btn-normal">
									<view class="pay-item dis-flex flex-x-between">
										<view class="item-left dis-flex flex-y-center">
											<view class="item-left_icon wechat">
												<text class="iconfont icon-weixinzhifu"></text>
											</view>
											<view class="item-left_text">
												<text>{{ PayTypeEnum.WECHAT.name }}</text>
											</view>
										</view>
									</view>
								</button>
							</form>
							<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" report-submit="true">
								<button form-type="submit" class="btn-normal">
									<view class="pay-item dis-flex flex-x-between">
										<view class="item-left dis-flex flex-y-center">
											<view class="item-left_icon balance">
												<text class="iconfont icon-qiandai"></text>
											</view>
											<view class="item-left_text">
												<text>{{ PayTypeEnum.BALANCE.name }}</text>
											</view>
										</view>
									</view>
								</button>
							</form>
						</view>
					</view>
				</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
	// 枚举类：发货方式
	import DeliveryTypeEnum from '../../utils/enum/DeliveryType.js';
	import zanpopup from '../../components/popup/popup.vue'

	// 枚举类：支付方式
	import PayTypeEnum from '../../utils/enum/order/PayType'
	export default {
		components: {
			zanpopup
		},
		computed: {
			Height() {
				return uni.upx2px(this.scrollHeight * 2) + 'px';
			}
		},
		data() {
			return {
				dataType: 'all', // 列表类型
				list: [], // 订单列表
				Type:'all',
				scrollHeight: null, // 列表容器高度

				DeliveryTypeEnum, // 配送方式
				PayTypeEnum, // 支付方式

				no_more: false, // 没有更多数据
				isLoading: true, // 是否正在加载中

				page: 1, // 当前页码

				showQRCodePopup: false, // 核销码弹窗显示隐藏
				QRCodeImage: '', // 核销码图片
				
				showPayPopup: '',
				payOrderId:0,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.setListHeight();
			this.Type = options.type || 'all';
			this.setData({
				Type:options.type || 'all',
				dataType: this.Type,
			});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取订单列表
			this.getOrderList();
		},
		methods: {
			/**
			 * 获取订单列表
			 */
			getOrderList: function(isPage, page) {
				let _this = this;
				_this._get('user.order/lists', {
					page: page || 1,
					dataType: _this.Type
				}, function(result) {
					let resList = result.data.list,
						dataList = _this.list;
					if (isPage == true) {
						_this.setData({
							'list.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							list: resList,
							isLoading: false,
						});
					}
				});
			},
			/**
			 * 切换标签
			 */
			bindHeaderTap: function(e) {
				this.setData({
					Type:e.currentTarget.dataset.type,
					dataType: e.currentTarget.dataset.type,
					list: {},
					isLoading: true,
					page: 1,
					no_more: false,
				});
				// 获取订单列表
				this.getOrderList(e.currentTarget.dataset.type);
			},

			/**
			 * 取消订单
			 */
			cancelOrder: function(e) {
				let _this = this;
				let order_id = e.currentTarget.dataset.id;
				uni.showModal({
					title: "友情提示",
					content: "确认要取消该订单吗？",
					success: function(o) {
						if (o.confirm) {
							_this._post_form('user.order/cancel', {
								order_id
							}, function(result) {
								_this.getOrderList(_this.Type);
							});
						}
					}
				});
			},

			/**
			 * 确认收货
			 */
			receipt: function(e) {
				let _this = this;
				let order_id = e.currentTarget.dataset.id;
				uni.showModal({
					title: "提示",
					content: "确认收到商品？",
					success: function(o) {
						if (o.confirm) {
							_this._post_form('user.order/receipt', {
								order_id
							}, function(result) {
								_this.getOrderList(_this.Type);
							});
						}
					}
				});
			},


			/**
			 * 点击付款按钮
			 */
			onPayOrder(e) {
				let _this = this;
				// 记录订单id
				console.log(e.currentTarget.dataset.id)
				_this.setData({
					payOrderId: e.currentTarget.dataset.id
				});
				// 显示支付方式弹窗
				_this.onTogglePayPopup();
			},

			/**
			 * 选择支付方式
			 */
			onSelectPayType(e) {
				let _this = this;
				// 记录formId
				// _this.saveFormId(e.detail.formId);
				// 隐藏支付方式弹窗
				_this.onTogglePayPopup();
				console.log(_this.payOrderId, e.currentTarget.dataset.value)
				if (!_this.showPayPopup) {
					// 发起付款请求
					_this.payment(_this.payOrderId, e.currentTarget.dataset.value);
				}
			},

			/**
			 * 显示/隐藏支付方式弹窗
			 */
			onTogglePayPopup() {
				this.setData({
					showPayPopup: !this.showPayPopup
				});
			},

			/**
			 * 发起付款请求
			 */
			payment(orderId, payType) {
				let _this = this;
				// 显示loading
				uni.showLoading({
					title: '正在处理...',
				});
			
				_this._post_form('user.order/pay', {
					order_id: orderId,
					payType: payType,
					// #ifdef APP-PLUS
					posttype: "android",
					// #endif
				}, result => {
					console.log(result)
					if (result.code === -10) {
						_this.showError(result.msg);
						return false;
					}
					// 发起微信支付
					if (result.data.pay_type == PayTypeEnum.WECHAT.value) {
						_this.wxPayment({
							
							payment: result.data.payment,
							success() {
								// 跳转到已付款订单
								uni.navigateTo({
									url: '../order/detail?order_id=' + orderId
								});
							},
							fail() {
								_this.showError(result.msg.error);
							},
						});
					}
					// 余额支付
					if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
						_this.showSuccess(result.msg.success, () => {
							// 跳转到已付款订单
							uni.navigateTo({
								url: '../order/detail?order_id=' + orderId
							});
						});
					}
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 订单评价
			 */
			comment(e) {
				let _this = this;
				let order_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: './comment/comment?order_id=' + order_id,
				})
				// console.log(order_id);
			},

			/**
			 * 跳转订单详情页
			 */
			navigateToDetail(e) {
				let order_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../order/detail?order_id=' + order_id
				});
			},

			onPullDownRefresh() {
				uni.stopPullDownRefresh();
			},

			/**
			 * 下拉到底加载数据
			 */
			bindDownLoad() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 加载下一页列表
				this.getOrderList(true, ++this.page);
			},

			/**
			 * 设置商品列表高度
			 */
			setListHeight() {
				let systemInfo = uni.getSystemInfoSync(),
					upx = systemInfo.windowWidth / 750, // 计算upx
					tapHeight = Math.floor(upx * 88), // tap高度
					scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					scrollHeight
				});
			},

			/**
			 * 查看核销二维码
			 */
			onExtractQRCode(e) {
				let _this = this,
					order_id = e.currentTarget.dataset.id;
				// 调用后台api获取核销二维码
				uni.showLoading({
					title: '加载中',
				});
				_this._get('user.order/extractQrcode', {
					order_id
				}, (result) => {
					// 设置二维码图片路径
					_this.setData({
						QRCodeImage: result.data.qrcode
					});
					// 显示核销二维码
					_this.onToggleQRCodePopup();
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 核销码弹出层
			 */
			onToggleQRCodePopup() {
				let _this = this;
				_this.setData({
					showQRCodePopup: !_this.showQRCodePopup
				});
			},
		}
	}
</script>

<style>
	.header {
		width: 100%;
		height: 88upx;
		border-bottom: 1upx solid #e4e4e4;
		display: flex;
		background: #fff;
		line-height: 88upx;
		position: fixed;
		top: 0;
		z-index: 100;
		/* #ifdef H5 */
		margin-top: 86upx;
		/* #endif */
	}

	.header view {
		flex: 1;
		text-align: center;
		padding: 0 15upx;
	}

	.header view text {
		display: block;
	}

	.header view.active {
		color: #fd4a5f;
	}

	.header view.active text {
		border-bottom: 1px solid #fd4a5f;
	}

	.order-box {
		padding: 0 15px;
	}

	.order-header {
		/* border-bottom: 1upx solid #e4e4e4; */
		padding-top: 10upx;
	}

	.order-header .title {
		font-size: 30upx;
		color: #333;
	}

	.order-header .cont {
		/* display: block; */
		font-size: 30upx;
		color: #fd4a5f;
	}

	.order-cont {
		padding: 15upx 0;
		justify-content: space-between;
	}

	.order-cont .order-num text,
	.order-cont .order-time text {
		color: #777;
		font-size: 26upx;
	}

	.order-shop {
		padding: 16upx 0 16upx 0;
	}

	.order-shop-left,
	.order-shop-left image {
		width: 160upx;
		height: 160upx;
		/* border: 1upx solid #e4e4e4; */
		margin-right: 15upx;
		display: inline-block;
		background: #fff;
	}

	.order-shop .num {
		float: right;
	}

	.order-btn {
		padding: 18upx 0 18upx 0;
	}

	.order-btn .order-left {
		flex: 3;
	}

	.order-btn .order-left text,
	.order-btn .order-left .text {
		font-size: 29upx;
	}

	.order-btn .order-left .text {
		color: #888;
	}

	.order-btn .order-right {
		flex: 3;
	}

	.order-btn .order-right .btn-group {
		justify-content: flex-end;
	}

	.order-list-box .left {
		flex: 4;
		overflow: hidden;
		position: relative;
	}

	.order-list-box .right {
		flex: 1;
	}

	.goods-number {
		font-size: 28upx;
		color: #777;
	}

	.btn-default {
		border-radius: 4px;
		border: 1upx solid #ccc;
		padding: 6upx 20upx;
		font-size: 28upx;
		color: #555;
		float: right;
	}

	.btn-main {
		border-radius: 4px;
		border: 1upx solid #fd4a5f;
		padding: 6upx 20upx;
		font-size: 28upx;
		color: #fd4a5f;
		margin-left: 10upx;
		float: right;
	}

	.user-orderJtou {
		font-size: 24upx;
	}

	.order-img_list {
		background: #fff;
		border-top: 1upx solid #f1f1f1;
		border-bottom: 1upx solid #f1f1f1;
	}

	.order-right-name {
		position: absolute;
		top: 50%;
		left: 180upx;
		font-size: 30upx;
		color: #555;
		width: 100%;
		margin-top: -46upx;
		line-height: 1.6;
	}
	
	
	/* 弹出层 */
	
	.pop-example__container {
		background: #fff;
		padding: 30upx 40upx;
		border-radius: 10upx;
		min-width: 460upx;
	}
	
	.pop-example__container .pop-title {
		text-align: center;
	}
	
	.pop-content {
		margin-top: 30upx;
	}
	/* 弹出层：支付方式 */
	
	.pop-orderPay .pop-title {
		text-align: left;
	}
	
	.pay-method .pay-item {
		padding: 20upx 0;
		font-size: 28upx;
		/* border-bottom: 1upx solid rgb(248, 248, 248); */
	}
	
	.pay-method .pay-item .item-left_icon {
		margin-right: 20upx;
		font-size: 32upx;
	}
	
	.pay-method .pay-item .item-left_icon.wechat {
		color: #00c800;
	}
	
	.pay-method .pay-item .item-left_icon.balance {
		color: #ff9700;
	}
	
		.pop {
			visibility: hidden
		}
	
		.pop--show {
			visibility: visible
		}
	
		.pop__mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 14;
			background: rgba(0, 0, 0, .5);
			display: none
		}
	
		.pop__mask--hide {
			background: 0 0
		}
	
		.pop__container {
			position: fixed;
			left: 50%;
			top: 50%;
			-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
			-webkit-transform-origin: center;
			transform-origin: center;
			-webkit-transition: all .2s ease;
			transition: all .2s ease;
			z-index: 15;
			opacity: 0
		}
	
		.pop--show .pop__container {
			opacity: 1
		}
	
		.pop--show .pop__mask {
			display: block
		}
	
		.pop--left .pop__container {
			left: 0;
			top: 50%;
			-webkit-transform: translate3d(-100%, -50%, 0);
			transform: translate3d(-100%, -50%, 0)
		}
	
		.pop--show.pop--left .pop__container {
			-webkit-transform: translate3d(0, -50%, 0);
			transform: translate3d(0, -50%, 0)
		}
	
		.pop--right .pop__container {
			right: 0;
			top: 50%;
			left: auto;
			-webkit-transform: translate3d(100%, -50%, 0);
			transform: translate3d(100%, -50%, 0)
		}
	
		.pop--show.pop--right .pop__container {
			-webkit-transform: translate3d(0, -50%, 0);
			transform: translate3d(0, -50%, 0)
		}
	
		.pop--bottom .pop__container {
			top: auto;
			left: 50%;
			bottom: 0;
			-webkit-transform: translate3d(-50%, 100%, 0);
			transform: translate3d(-50%, 100%, 0)
		}
	
		.pop--show.pop--bottom .pop__container {
			-webkit-transform: translate3d(-50%, 0, 0);
			transform: translate3d(-50%, 0, 0)
		}
	
		.pop--top .pop__container {
			top: 0;
			left: 50%;
			-webkit-transform: translate3d(-50%, -100%, 0);
			transform: translate3d(-50%, -100%, 0)
		}
	
		.pop--show.pop--top .pop__container {
			-webkit-transform: translate3d(-50%, 0, 0);
			transform: translate3d(-50%, 0, 0)
		}
</style>
